<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
        
        function getByClass(parent,className){
            
            var aResult=[];//设置一个空数组
            var aElement=parent.getElementsByTagName('*');
             
             for (var i =0; i < aElement.length ; i++) {
             	  
             	  if (aElement[i].className==className) {  
                         aResult.push(aElement[i]);
             	  }

             }
           return aResult;
        }



		window.onload=function(){
            var box=document.getElementById('box');
            //var lis=box.getElementsByTagName('li');

            
            //for (var i = 0; i < lis.length; i++) {
            //	if (lis[i].className=='red') {
            //		lis[i].style.background='red';
            //	}
            //}
            
            //用函数的方式
            var lis=getByClass(box,'red');
            for (var i =0; i < lis.length; i++) {
            	lis[i].style.background='red';
            }

             


		}
	</script>
</head>
<body>
	<ul id="box">
		<li class="red"></li>
		<li></li>
		<li></li>
		<li class="red"></li>
		<li></li>
	</ul>
</body>
</html>